<template>
    <div>
        <div style="text-align:left;">
            <h5>一级分类：</h5>
            <el-row>
                <el-col :span="3"  v-for="(o,index) in firstData" :key="index">
                    <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="width:30px;height:30px;" />
                    <span @click="getSubData(o.id)"> {{o.name }}</span>
                </el-col>
            </el-row>
        </div>        
        
        <div style="text-align:left;">
            <h5>二级级分类：</h5>
            <el-row>
                <el-col :span="3"  v-for="(o,index) in subData" :key="index">
                    <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="width:30px;height:30px;" />
                    <span @click="gotoGoodsList(o.id)">{{o.name }}</span>
                </el-col>
            </el-row>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return{
            firstData:[],
            subData:[]
        }
    },
    methods:{
        //一级分类的时候，后台判断处理了，所以不需要传id
        onloadData(){
            let url='http://localhost:5266/goods/category'
            this.$http.get(url).then(res=>{
                this.firstData = res.data
            })
        },
        //加载子类（一级分类点击的时候，加载相应的子类）
        getSubData(id){
            let url='http://localhost:5266/goods/category?id='+id
            this.$http.get(url).then(res=>{
                this.subData = res.data
            })
        },
        gotoGoodsList(id){
            this.$router.push('/fuxi/002?categoryid='+id)
        }
    },
    mounted(){
        this.onloadData()
    }
}
</script>